import React from 'react';
import { Button, Card, Input, Space } from 'antd';

const { TextArea } = Input;
const App: React.FC = () => (
  <Space direction="vertical" size={16}>
    <div style={{ textAlign: 'right' }}>
      <Button color="cyan" variant="solid">
        保存信息
      </Button>
    </div>
    <Card title="基本信息" extra={<a href="#">More</a>} style={{ width: 1200 }}>
      <p style={{ marginBottom: '8px' }}>店铺名称</p>
      <Input style={{ marginBottom: '10px', width: '70%' }} defaultValue="我的店铺" />
      <p style={{ marginBottom: '8px' }}>店铺简介</p>
      <TextArea rows={4} defaultValue={"提供美味的中西餐美食，让每位顾客都能享受到舒适的用餐体验。"}/>
    </Card>
    <Card title="联系方式" extra={<a href="#">More</a>} style={{ width: 1200 }}>
      <div style={{ display: 'flex', gap: '96px' }}>
        <div>
          <p style={{ marginBottom: '8px' }}>联系人</p>
          <Input style={{ marginBottom: '10px', width: '130%' }} defaultValue ={"张三"} />
        </div>
        <div>
          <p style={{ marginBottom: '8px' }}>手机号</p>
          <Input style={{ marginBottom: '10px', width: '150%' }} defaultValue ={"13888888888"}/>
        </div>
      </div>
    </Card>
    <Card title="营业信息" extra={<a href="#">More</a>} style={{ width: 1200 }}>
      <p style={{ marginBottom: '8px' }}>店铺地址</p>
      <Input style={{ marginBottom: '10px', width: '70%' }} defaultValue ={"北京市朝阳区12号"}/>
      <p style={{ marginBottom: '8px' }}>营业时间</p>
      <Input style={{ marginBottom: '10px', width: '70%' }} defaultValue ={"09:00-22:00"} />
    </Card>
  </Space>
);

export default App;
